<%inherit file="/autohandler"/> 

<div id="video">

<video src='${c.clips[0]['url']}' controls='controls' ontimeupdate="Updatetime()" width=320 height=240></video>

<form name="api">
<table style="font-size:small">
<tr>
<td>Time:</td>
<td><input name="tfield" cols="8"></textarea></td>
</tr>
##Output area useful for debugging:
<tr>
<td>Output:</td>
<td><textarea name="ofield" cols="80" rows="1"></textarea></td>
</tr>
</table>
</form>
##</div>

##<div id="playlistitems">
<table style="font-size:small">

% for clip in c.clips:
<tr>
   <td><a onclick='ClipPlay("${clip['url']}","${clip['name']}")'><img src="/images/blank.png"></a></td>
    <td>${clip['id']}</td>
    <td>${ h.link_to(clip['name'], h.url(controller='item', action="displayitem", edit="no", id=clip['id']))}</td>
    <td>${clip['name']}</td>
    <td>${clip['url']}</td>
</tr> 
% endfor
</table>
</div>

<script>

var output = document.api.ofield;
var toutput = document.api.tfield;
var gototime = document.api.gfield;
var myVideo = document.getElementsByTagName('video')[0];
var myAudio = document.getElementsByTagName('audio')[0];

if (myAudio) {
//  addOutput("Audio");
  myMedia = myAudio;
}
else {
//  addOutput("Video");
  myMedia = myVideo;
}

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);

function ClipPlay(location, name) {
  myMedia.src = location
  myMedia.load();
  myMedia.play();
  addOutput(name);
}

function Updatetime() {
  addToutput(myMedia.currentTime);
}

function addToutput(str) {
  toutput.value = str;
}

function Gototime(location) {
  t = getGoto();
//  addOutput(location + t);
  myMedia.src = location + t;
  myMedia.load();
  myMedia.play();
}

function getGoto() {
  i = parseInt(gototime.value);
  return isNaN(i) ? 0 : i;
}

var outLines = 0;

function addOutput(str) {
  if (outLines == 0) {
    output.value = str;
  } else {
    output.value = str + "\n" + output.value;
  }
  outLines++;
  if (outLines == 11) {
    i = output.value.lastIndexOf("\n");
    output.value = output.value.substr(0, i);
    outLines--;
  }

}
</script>


